<template>
  <div>
    <div class="login">
      <div class="img">
        <img src="/src/assets/login.png" />
      </div>
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        class="form"
      >
        <a-form-item
          label="账号"
          name="username"
          :rules="[{ required: true, message: '账号不能为空！' }]"
        >
          <a-input
            v-model:value="formState.username"
            placeholder="请输入账号"
            autocomplete="username"
          />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '密码不能为空！' }]"
        >
          <a-input-password
            v-model:value="formState.password"
            placeholder="请输入密码"
            autocomplete="current-password"
          />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit" @click="submit" style="width: 200px"
            >登录</a-button
          >
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, onMounted, ref } from "vue";
import { login } from "@/api/login.js";
import { useAppStoreHook } from "@/store/app";
import { useRouter } from "vue-router";
import { setToken } from "@/utils/auth";
import { message } from "ant-design-vue";

const formState = ref({
  username: "",
  password: "",
});
const router = useRouter();
const appStore = useAppStoreHook();

const submit = () => {
  console.log("登录", formState.value);
  login(formState.value).then((res) => {
    console.log(res, "-----");
    appStore.setUserInfoAction(res.data);
    setToken(res.data.token);
    message.success("登录成功！");
    router.push({ path: "/Target" });
  });
};

onMounted(() => {});
</script>
<style scoped lang="scss">
.form {
  width: 500px;
  height: 300px;
  margin: 15% auto;
  border: 1px solid #cccccc;
  padding: 72px 132px 32px 32px;
  border-radius: 20px;
}
.login {
    display: flex;
    .img {
      width: 820px;
      height: 100vh;
      img {
        height: 1200px;
      }
    }
  }
</style>
